import React from 'react';
import {inject,observer} from 'mobx-react';
import Button from "components/CustomButtons/Button.js";
import Add from "@material-ui/icons/Add";
import CustomInput from "../../../components/CustomInput/CustomInput.js";
import Header from "components/Header/Header.js";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import styles from "assets/jss/material-kit-react/views/componentsSections/navbarsStyle.js";
import { makeStyles } from "@material-ui/core/styles";
import GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js";
@inject('mainStore')
@observer
class  Main extends React.Component{
    
    render(){
        
    // return makeStyles-container-1   <div onClick={()=>{this.props.mainStore.addCount()}} >this is  {this.props.mainStore.count}</div>;
    return   <div>  
   <GridContainer  className='makeStyles-container-1'>
            <GridItem>
        {/* <Button type="primary" onClick={()=>{this.props.mainStore.addCount()}}>增加{this.props.mainStore.count}</Button>    */}
        <CustomInput
                labelText="添加代办"
                id="float"
                onChange={(v)=>{alert(v)}}
                formControlProps={{
                  fullWidth: true,
                
                }}
                inputProps={
                  {onChange:(v)=>{
                    }}
                }
              />
                <Button style={{'float':'right'}}color="primary" round  onClick={()=>{this.props.mainStore.addList("李水仙不洗澡")}} >
                <Add  /> 添 加
              </Button>
              </GridItem>

        {this.showList()}
        </GridContainer>
        </div>
    ;
    }

    showList(){
      // const useStyles = makeStyles(styles);

      // const classes= useStyles();'
      const classes={};
       let todoListNode=[];
        const todoList=this.props.mainStore.todoList;
        todoList.forEach(element => {
        todoListNode.push(  <Header
          brand={element.text}
          rightLinks={
            <List className={classes.list}>
              <ListItem className={classes.listItem}>
                <Button
                  href="#pablo"
                  className={classes.navLink}
                  onClick={e => e.preventDefault()}
                  color="transparent"
                >
                  Discover
                </Button>
              </ListItem>
              <ListItem className={classes.listItem}>
                <Button
                  href="#pablo"
                  className={classes.navLink}
                  onClick={e => e.preventDefault()}
                  color="transparent"
                >
                  Wishlist
                </Button>
              </ListItem>
              <ListItem className={classes.listItem}>
                <Button
                  href="#pablo"
                  className={classes.registerNavLink}
                  onClick={e => e.preventDefault()}
                  color="rose"
                  round
                >
                  Register
                </Button>
              </ListItem>
            </List>
          }
        />);
        });
        return todoListNode;
    }
}

export default Main;